<template>
    <div class="nav_index">
          <!-- logo -->
          <div class="nav-logo">
              <a href="/index" src = "" alt = "nothing">
                  <img src="../img/us_img1.jpg" alt="" >
              </a>
          </div>
  
          <div class="nav-right" >
              <ul class="nav-list" >
                  <el-li v-for="(menu,index) in menus" v-bind:key="index" @click="gotoOther(menu)"> 
                      {{menu.name}}
                  </el-li>
              </ul>
          </div>
          <div class="search-box">
            <el-input placeholder="请输入想要寻找的网站"
                v-model="queryInfo.query" clearable @clear="getInfoList">
                <template #append>
                
                <el-button @click="getInfoList">搜索</el-button>
                
                </template>
            </el-input>
          </div>
  
    </div>
    <div class="main">
        <router-view></router-view>
    </div>
  
  </template>
  
  <script setup>
    // 引入路由
import axios from "axios";
import {useRouter,useRoute} from "vue-router"
import {reactive} from 'vue'

const router = useRouter()
// const route = useRoute()


let menus = [
//   {name:'首页',href:'/index/index'},
    {name:'趣味课程',href:'/index/classes'},
    {name:'学习网站',href:'/index/studyweb'},
    {name:'笔记记录',href:'/index/article'},
    {name:'todolist记录',href:'/index/todolist'},
    {name:'退出账号',href:'/login'},
]

const gotoOther = (menu)=>{
    
    router.push(menu.href);
}

let queryInfo = reactive( {
    query:'',//查询参数
    address:'',
    detail:''
}
)

const getInfoList = (val)=>{
    var _self = this;
    axios
        .get('/spring-boot/course/manager/2'+val).then(function(response){
            _self.result = response.data
        })
        .catch((function (err) {//请求失败
            console.log(err);
            alert(err);
        })
        )
}


</script>
  
<style lang="less" scoped>
.nav_index{
    height:9vh;
    width: 100%;
    display: flex;
    background-color: rgba(220, 231, 219, 0.5);
    text-align: center;
    
    .nav-logo{
        width: 20%;
        background-color: azure;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .nav-right{
        border-left: 1px solid rgb(250, 244, 244);
        ul{
            list-style: none;
            display: flex;
            justify-content:space-evenly;
            
            el-li{
                padding-right: 30px;
                &:hover{
                    cursor: pointer;
                    color: red;
                }
            }
        }
    }
    .search-box{
        text-align: center;
        margin-right: 20px;
        width: 350px;
        margin-top: 15px;
    }

}


</style>
